<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>查看审批</title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" type="text/css" href="../../css/instruction.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/commonality.css">
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/main.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <header class="mui-bar mui-bar-nav">
        <span class="back" @click="back"></span>
        <span class="cross" @click="close"></span>
        <h1 class="mui-title my_mui-title">查看审批</h1>
    </header>
    <div class="mui-content my-mui-content">

        <ul class="report-tab">
            <li class="approve-type">
                <div class="approve-type-option" v-for="(item,index) in types">
                    <div v-text="item.name" @click="approveType(index)">
                        待我审批
                    </div>
                    <p></p>
                </div>
            </li>
            <!--<li>
               <select v-model="type">
                   <option v-for="item in types" :value="item.index" v-text="item.name"></option>
               </select>
            </li>-->
            <li v-if="statuShow">
                <select v-model="statu">
                    <option  v-for="item in status" :value="item.index" v-text="item.name"></option>
                </select>
            </li>
        </ul>
        <ul class="tabs" :class="!statuShow?'mytabs':'tabs'">
            <li v-for="(item,index) in groups" @click="open_detail(index)" v-if="isShow">
                <!--<div class="sideBar" :class="item.class"></div>-->
                <div class="approverImg" :style="item.style">{{item.hName}}</div>
                <div class="approverInfo">
                    <span class="name">{{item.hName}}</span>
                    <span class="date">{{item.createTime | getDate}}</span>
                    <span class="time">{{item.createTime | getTime}}</span>
                </div>
                <div style="clear: both;"></div>
                <div class="approveInfo reason" v-for="text in item.zgApplyTextExtends">
                    <label>{{text.title}}</label>
                    <span>{{text.content}}</span>
                </div>
                <div class="status" :style="{backgroundImage:item.getBg}"></div>    <!--:class="item.class"  {{item.status|getStatus}}-->
            </li>
        </ul>
    </div>
    <div class="footer">
        <ul class="home-footer">
            <li>
                <a href="###" onClick="window.location.href='addApproval.html?cid='+Request.cid+'&'+'loginName='+Request.loginName">
                    <div class="approve-write home-footer-style"></div>
                    <p>写申请</p>
                </a>
            </li>
            <li>
                <a href="###" onClick="window.location.href='approval_record.html?cid='+Request.cid+'&'+'loginName='+Request.loginName">
                    <div class="approve-look-click home-footer-style"></div>
                    <p>查看审批</p>
                </a>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</div>
<script>
//    autosize(document.querySelectorAll('textarea'));
    function UrlSearch(){
        var name,value;
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?");
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
            }
        }
    }
    var Request=new UrlSearch(); //实例化

    function sendInfoToJava(name) {
        //调用android程序中的方法，并传递参数
        javascript:WebView.showInfoFromJs(name);
    }

    $(function() {
             var app = new Vue({
                el: "#app",
                data: function () {
                    return{
                        statuShow:true,
                        isShow:true,
                        creatUserName:"",
                        popup: false,
                        not_finish: "",
                        cause: "",
                        detail: "",
                        groups: [],
                        group_name: [],
                        type:1,
                        types:[
//                            {
//                                name:'审批类型',
//                                index:0
//                            },
                            {
                                name:"待我审批",
                                index:1
                            },
                            {
                                name:'我已审批',
                                index:2
                            },
                            {
                                name:'我发起的',
                                index:3
                            },
                            {
                                name:'抄送我的',
                                index:4
                            }
                        ],
                        statu:-1,
                        status:[],
//                        status:[
//                            {
//                                name:'全部状态',
//                                index:-1
//                            },
//                            {
//                                name:'已同意',
//                                index:1
//                            },
//                            {
//                                name:'已拒绝',
//                                index:2
//                            },
//                            {
//                                name:'审批中',
//                                index:3
//                            },
//                            {
//                                name:'待审批',
//                                index:0
//                            },
//                            {
//
//                                name:'已撤销',
//                                index:4
//                            }
//                        ],
                        time:""
                    }
                },
                filters: {
                   getDate: function(input) {
                       var str = input.split(' ');
                       return str[0];
                   },
                   getTime: function(input) {
                        var str = input.split(' ');
                        return str.pop();
                   },
                   getStatus: function(input) {
                        if(input == 0){
                            return '待审批';
                        }else if(input == 1){
                            return '已同意';
                        }else if(input == 2){
                            return '已拒绝';
                        }else if(input == 3){
                            return '审批中';
                        }else if(input == 4){
                            return '已撤回';
                        }
                   }
                },
                methods: {
                    back: function () {
                        var name = "back";
                        sendInfoToJava(name);
                    },
                    close: function () {
                        var name = "close";
                        sendInfoToJava(name);
                    },
                    approval_info_status:function(status){
                        var this_obj = this;
                        this_obj.creatUserName = Request.loginName;
                        this_obj.groups = [];
                        if(this_obj.type == 1 || this_obj.type == 0){
                            var read_data = {
                                "creatUserName":this_obj.creatUserName//发起人
                            };
                        }else if(this_obj.type ==2){
                            var read_data = {
                                "approveUserName": this_obj.creatUserName
                            };
                        }else if(this_obj.type ==3){
                            var read_data = {
                                "approveUserName": this_obj.creatUserName
                            };
                        }else if(this_obj.type ==4){
                            var read_data = {
                                "ccUserName": this_obj.creatUserName
                            };
                        }
                        if(this_obj.type == 1 || this_obj.type == 0){
                            var read_url = "/apply/applys";
                        }else if(this_obj.type ==2){
                            var read_url = "/apply/approves";
                        }else if(this_obj.type ==3){
                            var read_url = "/apply/approvesed";
                        }else if(this_obj.type ==4){
                            var read_url = "/apply/applyCcs";
                        }/*else if(this_obj.type ==0){
                            var read_url = "/apply/applys";
                        }*/
//                        var read_url = "/apply/applys" ;
                        if(typeof(Request.loginName) == "undefined"){
                            mui.toast("请重新登录");
                        }else {
                            common_ajax(read_url, read_data, function (res) {
//                              debugger
                                for (var i in res.obj) {
                                    var node = {};
                                    var r = parseInt(Math.random() * 255);
                                    var g = parseInt(Math.random() * 255);
                                    var b = parseInt(Math.random() * 255);
                                    var style = {
                                        'background-color': "rgb(" + r + "," + g + "," + b + ")"
                                    };
                                    if( res.obj[i]['status'] == 0){
                                        if(res.obj[i]['approveIndex'] == 1){
                                            node.getBg = 'url(../../images/dsp.png)';
                                        }else{
                                            node.getBg  = 'url(../../images/spz.png)';
                                        }
                                    }else if(res.obj[i]['status'] == 1){
                                        node.getBg = 'url(../../images/yty.png)';
                                    }else if(res.obj[i]['status'] == 2){
                                        node.getBg  = 'url(../../images/yjj.png)';
                                    }else if(res.obj[i]['status'] == 3){
                                        node.getBg  = 'url(../../images/spz.png)';
                                    }else if(res.obj[i]['status'] == 4){
                                        node.getBg  = 'url(../../images/ycx.png)';
                                    }
                                    if(status == 3){
                                        if (res.obj[i]['status'] == 0 && res.obj[i]['approveIndex'] > 1) {
                                            node.style = style;
                                            node.hName = res.obj[i]['zhName'].slice(-2);
                                            node.creatUserName = res.obj[i]['creatUserName'];
                                            node.createTime = res.obj[i]['creatTime'];
                                            node.zgApplyTextExtends = res.obj[i]['zgApplyTextExtends'];
                                            node.status = 3;
                                            node.class = 'approving';
                                            node.zgApplyId = res.obj[i]['zgApplyId'];
                                            this_obj.groups.push(node);
                                        }
                                    } else if(status == 0){
                                        if (res.obj[i]['status'] == 0 && res.obj[i]['approveIndex'] == 1) {
                                            node.style = style;
                                            node.hName = res.obj[i]['zhName'].slice(-2);
                                            node.creatUserName = res.obj[i]['creatUserName'];
                                            node.createTime = res.obj[i]['creatTime'];
                                            node.zgApplyTextExtends = res.obj[i]['zgApplyTextExtends'];
                                            node.status = 1;
                                            node.class = 'standby';
                                            node.zgApplyId = res.obj[i]['zgApplyId'];
                                            this_obj.groups.push(node);
                                        }
                                    } else {
                                        if(res.obj[i]['status'] == status) {
                                            node.style = style;
                                            node.hName = res.obj[i]['zhName'].slice(-2);
                                            node.creatUserName = res.obj[i]['creatUserName'];
                                            node.createTime = res.obj[i]['creatTime'];
                                            node.zgApplyTextExtends = res.obj[i]['zgApplyTextExtends'];
                                            //                                  debugger
                                            node.status = res.obj[i]['status'];
                                            if (node.status == 1) {
                                                node.class = 'agreed';
                                            } else if (node.status == 2) {
                                                node.class = 'deny';
                                            } else if (node.status == 4) {
                                                node.class = 'withdraw';
                                            }
                                            node.zgApplyId = res.obj[i]['zgApplyId'];
                                            this_obj.groups.push(node);
                                        }
                                    }
                                }
                            }, function (res) {
                                alert("请求失败");
                            });
                        }
                    },
                    approval_info: function(url,type) {
                        var this_obj = this;
                        var status=[
                            {
                                name:'全部状态',
                                index:-1
                            },
                            {
                                name:'已同意',
                                index:1
                            },
                            {
                                name:'已拒绝',
                                index:2
                            },
                            {
                                name:'审批中',
                                index:3
                            },
                            {
                                name:'待审批',
                                index:0
                            },
                            {

                                name:'已撤销',
                                index:4
                            }
                        ];
                        if(this_obj.type == 3){
                            status = status.slice(0,4);
                        }else if(this_obj.type == 4){
                            status = status.slice(0,3);
                        }
                        this_obj.status=status;
                        this_obj.creatUserName = Request.loginName;
                          this_obj.groups = [];
                          if(type == 1){
                              var read_data = {
                                    "creatUserName":this_obj.creatUserName//发起人
                                };
                          }else if(type ==2){
                             var read_data = {
                                 "approveUserName": this_obj.creatUserName
                             };
                          }else if(type ==3){
                             var read_data = {
                                "approveUserName": this_obj.creatUserName
                             };
                          }else if(type ==4){
                              var read_data = {
                                  "ccUserName": this_obj.creatUserName
                              };
                          }
                          var read_url = url ;
                        if(typeof(Request.loginName) == "undefined"){
                            mui.toast("请重新登录");
                        }else {
                            common_ajax(read_url, read_data, function (res) {
//                              debugger
                                this_obj.groups = [];
                                for (var i in res.obj) {
                                    var node = {};
                                    var r = parseInt(Math.random() * 255);
                                    var g = parseInt(Math.random() * 255);
                                    var b = parseInt(Math.random() * 255);
                                    var style = {
                                        'background-color': "rgb(" + r + "," + g + "," + b + ")"
                                    };
                                    if( res.obj[i]['status'] == 0){
                                        if(this_obj.type == 2){
                                            node.getBg = 'url(../../images/dsp.png)';
                                        }else{
                                            if(res.obj[i]['approveIndex'] == 1){
                                                node.getBg = 'url(../../images/dsp.png)';
                                            }else{
                                                node.getBg  = 'url(../../images/spz.png)';
                                            }
                                        }
                                    }else if(res.obj[i]['status'] == 1){
                                        node.getBg = 'url(../../images/yty.png)';
                                    }else if(res.obj[i]['status'] == 2){
                                        node.getBg  = 'url(../../images/yjj.png)';
                                    }else if(res.obj[i]['status'] == 3 ){
                                        node.getBg  = 'url(../../images/spz.png)';
                                    }else if(res.obj[i]['status'] == 4){
                                        node.getBg  = 'url(../../images/ycx.png)';
                                    }
                                    node.style = style;
                                    node.hName = res.obj[i]['zhName'].slice(-2);
                                    node.creatUserName = res.obj[i]['creatUserName'];
                                    node.createTime = res.obj[i]['creatTime'];
                                    node.zgApplyTextExtends = res.obj[i]['zgApplyTextExtends'];
//                                  debugger
                                    node.status = res.obj[i]['status'];
                                    if (node.status == 0) {
                                        if(res.obj[i]['approveIndex'] == 1){
                                            node.class = 'standby';
                                        }else{
                                            node.class = 'approving';
                                        }
//                                        node.class = 'standby';
                                    } else if (node.status == 1) {
                                        node.class = 'agreed';
                                    } else if (node.status == 2) {
                                        node.class = 'deny';
                                    } else if (node.status == 3) {
                                        node.class = 'approving';
                                    } else if (node.status == 4) {
                                        node.class = 'withdraw';
                                    }
                                    node.zgApplyId = res.obj[i]['zgApplyId'];
                                    this_obj.groups.push(node);
                                }
                            }, function (res) {
                                alert("请求失败");
                            });
                        }
                    },
                    open_detail: function(index) {
//                        debugger;
                      var this_obj = this;
                      if(this_obj.groups[index].status==1 || this_obj.groups[index].status){
                          location.href = 'approval_info.html?cid='+Request.cid+'&'+'loginName='+Request.loginName;
                          localStorage.detailId = 3;
                      }else{
                          if(this_obj.type == 1){
                                location.href = 'approval_info.html?cid='+Request.cid+'&'+'loginName='+Request.loginName;
                                localStorage.detailId = 1;
                            }else if(this_obj.type == 2){
                                location.href = 'approval_info.html?cid='+Request.cid+'&'+'loginName='+Request.loginName;
                                 localStorage.detailId = 2;
                            }else if(this_obj.type == 4){
                               location.href = 'approval_info.html?cid='+Request.cid+'&'+'loginName='+Request.loginName;
                               localStorage.detailId = 4;
                            }
                      }
                        location.href = 'approval_info.html?cid='+Request.cid+'&'+'loginName='+Request.loginName;
                      localStorage.zgApplyId = this_obj.groups[index]['zgApplyId'];
                    },
                    approveType:function(index){
                        this_obj = this;
                        this_obj.statu = -1;
                        if(index == 0){
                            this_obj.type=2;
                            this_obj.approval_info("/apply/approves",2);
                            this_obj.statuShow = false;
                        }else if(index == 1){
                            this_obj.type=3;
                            this_obj.approval_info("/apply/approvesed",3);
                            this_obj.statuShow = true;
                        }else if(index == 2){
                            this_obj.type = 1;
                            this_obj.approval_info("/apply/applys",1);
                            this_obj.statuShow = true;
                        }else if(index == 3){
                            this_obj.type=4;
                            this_obj.approval_info("/apply/applyCcs",4);
                            this_obj.statuShow = true;
                        }
                    }
                }
            });
        /*     app.$watch('type',function(newValue,oldValue) {
                 if(newValue == 0){
                     app.approval_info("/apply/applys",1);
                     this.type=0;
                 } else if(newValue == 1){
                     app.approval_info("/apply/applys",1);
                     this.type=1;
                 }else if(newValue == 2){
                     app.approval_info("/apply/approves",2);
                     this.type=2;
                 }else if(newValue == 3){
                     app.approval_info("/apply/approvesed",3);
                     this.type=3;
                 }else if(newValue == 4){
                     app.approval_info("/apply/applyCcs",4);
                     this.type=4;
                 }
             });*/
            app.approval_info("/apply/applys",1);

            app.$watch('statu',function(newValue,oldValue) {
                if(newValue == -1){
                    var url="";
                    if(app.type == 1 || app.type == 0){
                        url = "/apply/applys";
                    }else if(app.type ==2){
                        url = "/apply/approves";
                    }else if(app.type ==3){
                         url = "/apply/approvesed";
                    }else if(app.type ==4){
                         url = "/apply/applyCcs";
                    }
                    app.approval_info(url,app.type);
                } else if(newValue == 0){
                    app.approval_info_status(0);
                }else if(newValue == 1){
                    app.approval_info_status(1);
                }else if(newValue == 2){
                    app.approval_info_status(2);
                }else if(newValue == 3){
                    app.approval_info_status(3);
                }else if(newValue == 4){
                    app.approval_info_status(4);
                }
            });
//            app.approval_info("/apply/applys",1);
            })
    </script>
</body>
</html>